<template>
  <div class="order-header">
    <div class="order-header-shop">
      <van-icon name="hot" color="#ee0a24" size="10vw" />
      <div>
        <div class="shopname">{{ orderStore.shopName }}</div>
        <div class="shopaddress">{{ orderStore.shopAddress }}</div>
      </div>
    </div>

    <div class="order-header-type">
      <div class="type">
        <div class="type-content">
          <van-button
            type="default"
            size="large"
            :class="orderStore.orderType == '堂食' ? 'select' : ''"
            @click="clickType('堂食')"
          >
            <!-- <template #icon><van-icon name="shop-o" /> </template> -->
            <span class="type-content-text">堂食</span></van-button
          >
          <van-button
            type="default"
            size="large"
            :class="orderStore.orderType == '外带' ? 'select' : ''"
            @click="clickType('外带')"
            >外带</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from "vue";
import { useorderStore } from "@/store/modules/module.js";

const orderStore = useorderStore();
const clickType = (str: string) => {
  orderStore.orderType = str;
};
onMounted(() => {
  clickType("堂食");
});
</script>

<style lang="less" scoped>
.order-header {
  height: 10vh;
  margin-left: 4vw;
  margin-right: 4vw;
  margin-top: 2vw;
  padding: 1vw;
  background-color: #ffffff;
  border-radius: 4vw;

  .order-header-shop {
    display: flex;
    align-items: center;
    // text-align: center;
    .shopname {
      font-size: 5vw;
      font-weight: 400;
    }
    .shopaddress {
      font-size: 2vw;
    }
  }
  .order-header-type {
    .type {
      display: flex;
      .type-content {
        // align-items: center;
        // justify-content: center;
        display: flex;
        width: 100vw;
        height: 5vh;
        .select {
          position: relative;
          text-align: left;
          color: #00aaff;
          border: 0.5vw solid #ff335f;
          overflow: hidden;
          ::after {
            content: "";
            position: absolute;
            right: -3vw;
            bottom: -3vw;
            width: 6vw;
            height: 6vw;
            background-color: #ff335f;
            transform: rotate(45deg);
          }
          ::before {
            content: "";
            width: 1vw;
            height: 4vw;
            position: absolute;
            right: 0vw;
            bottom: 0vw;
            border: 0.5vw solid #fff;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotate(45deg);
            z-index: 999;
          }
        }
      }
    }
  }
}
</style>
